<template>
  <div class="rack">
    <div class="content">
      <div class="header">
       
        <p>书架</p>
      
      </div>
     
      <div class="list"  v-if="token && collectList.length ">
        <div class="item" v-for="item in collectList" :key="item.id" @click="$router.push({path:'/passage',query:{id: item.id}})">
          <div class="img">
            <van-image lazy-load radius="5" :src="item.vertical_cover" />
          </div>
          <h3>{{ item.title }}</h3>
          <div class="replace">
            <span>{{ item.styles[0] }}</span>
          </div>
        </div>
      </div>
       <van-empty
        class="custom-image"
        image="../assets/images/img_blank.png"
        description="你还没有收藏任何漫画哟"
       v-else
      />
    </div>
    <FootCom />
  </div>
</template>

<script>
import FootCom from "../components/FootCom.vue";

export default {
  data() {
    return {
      collectList: JSON.parse(localStorage.getItem("collectList")) || [],
      token:localStorage.getItem("token")
    };
  },
  components: {
    FootCom,
  },
};
</script>

<style lang="scss" scoped>
.rack {
  padding-bottom: 50px;
  .van-empty {
    margin-top: 150px;
  }
  .custom-image::v-deep .van-empty__image {
    width: 187px;
    height: 140px;
  }
  .content {
    .header {
      padding: 0px 12px;
      height: 50px;
      line-height: 50px;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      border-bottom: 2px solid #f5f5f5;
      text-align: center;
      p {
        font-size: 16px;
        font-weight: bold;
        color: #666;
      }
     
    }
    .list {
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;
      padding: 0px 12px;
      .item {
        width: 30%;
        margin-top: 15px;
        margin-right: 17px;
        &:nth-child(3n) {
          margin-right: 0px;
        }

        .img {
          width: 100%;
          height: 150px;

          img {
            width: 100%;
            height: 150px;
          }
        }
        h3 {
          font-size: 14px;
          color: #333;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .replace {
          display: flex;
          flex-wrap: wrap;
          span {
            font-size: 12px;
            color: #666;
            margin-right: 10px;
            // width: 33%;
          }
        }
      }
    }
  }
}
</style>